<template>
	<view class="log-container">
		<view class="log-header">
			<text class="title">应用日志</text>
			<view class="filter-controls">
				<button v-for="level in logLevels" :key="level.value" :style="{ backgroundColor: level.active ? level.color : '#f5f5f5' }" @click="toggleFilter(level.value)"
					class="filter-btn">
					{{ level.label }}
				</button>
				<button @click="clearLogs" class="clear-btn">清空</button>
			</view>
		</view>
		<scroll-view scroll-y class="log-content" :scroll-top="scrollTop">
			<view v-for="(log, index) in filteredLogs" :key="index" class="log-item" :style="{ borderLeft: `4px solid ${log.color}` }">
				<view class="log-meta">
					<text class="timestamp">{{ formatTime(log.timestamp) }}</text>
					<text class="level-tag" :style="{ backgroundColor: log.color }">
						{{ log.level.toUpperCase() }}
					</text>
				</view>
				<text class="message">{{ log.message }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		getLogs,
		clearLogs as clearLogStore,
		LogLevel
	} from '@/utils/logger';

	const logs = ref([]);
	const scrollTop = ref(0);
	const activeFilters = ref([LogLevel.LOG, LogLevel.INFO, LogLevel.WARN, LogLevel.ERROR]);

	const logLevels = computed(() => [{
			value: LogLevel.LOG,
			label: 'Log',
			color: '#35495e',
			active: activeFilters.value.includes(LogLevel.LOG)
		},
		{
			value: LogLevel.INFO,
			label: 'Info',
			color: '#42b983',
			active: activeFilters.value.includes(LogLevel.INFO)
		},
		{
			value: LogLevel.WARN,
			label: 'Warn',
			color: '#e6a23c',
			active: activeFilters.value.includes(LogLevel.WARN)
		},
		{
			value: LogLevel.ERROR,
			label: 'Error',
			color: '#f56c6c',
			active: activeFilters.value.includes(LogLevel.ERROR)
		}
	]);

	onMounted(() => {
		logs.value = getLogs();
	});

	const filteredLogs = computed(() => {
		return logs.value.filter(log => activeFilters.value.includes(log.level));
	});

	const formatTime = (timestamp) => {
		const date = new Date(timestamp);
		return date.toLocaleTimeString();
	};

	const toggleFilter = (level) => {
		if (activeFilters.value.includes(level)) {
			activeFilters.value = activeFilters.value.filter(l => l !== level);
		} else {
			activeFilters.value.push(level);
		}
		// 自动滚动到底部
		scrollToBottom();
	};

	const clearLogs = () => {
		clearLogStore();
		logs.value = [];
	};

	const scrollToBottom = () => {
		// 触发滚动到底部
		scrollTop.value = 999999;
	};
</script>

<style>
	.log-container {
		padding: 20rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.log-header {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		background-color: white;
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.filter-controls {
		display: flex;
		gap: 10rpx;
		flex-wrap: wrap;
	}

	.filter-btn {
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: white;
		border: none;
	}

	.clear-btn {
		background-color: #f56c6c;
		color: white;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-left: auto;
	}

	.log-content {
		flex: 1;
		background-color: white;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.log-item {
		margin-bottom: 20rpx;
		padding: 15rpx;
		background-color: #fafafa;
		border-radius: 4rpx;
		border-left: 4px solid;
	}

	.log-meta {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.timestamp {
		font-size: 24rpx;
		color: #999;
	}

	.level-tag {
		font-size: 22rpx;
		color: white;
		padding: 0 10rpx;
		border-radius: 4rpx;
	}

	.message {
		font-size: 28rpx;
		color: #333;
		word-break: break-all;
		white-space: pre-wrap;
	}
</style>